<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站积分充值页面集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --secondary: #6B7280;
      --light: #F9FAFB;
      --dark: #1F2937;
      --white: #FFFFFF;
      --success: #10B981;
      --danger: #EF4444;
      --border: #E5E7EB;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      
      /* 不同风格主题色 */
      --style1: #3B82F6; /* 现代蓝 */
      --style2: #F97316; /* 活力橙 */
      --style3: #8B5CF6; /* 优雅紫 */
      --style4: #1E40AF; /* 商务蓝 */
      --style5: #10B981; /* 清新绿 */
      --style6: #111827; /* 暗黑模式 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      transition: background-color 0.3s ease;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      transition: background-color 0.3s ease;
    }
    
    /* 主页面容器 */
    .recharge-page {
      display: none;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .recharge-page.active {
      display: flex;
      animation: fadeIn 0.3s ease forwards;
    }
    
    /* 顶部导航栏 */
    .page-header {
      padding: 18px 20px;
      position: relative;
      text-align: center;
      border-bottom: 1px solid var(--border);
      background-color: var(--white);
      transition: all 0.3s ease;
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-back {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      cursor: pointer;
      transition: color 0.3s ease;
    }
    
    .header-actions {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 18px;
      cursor: pointer;
      margin-left: 15px;
      transition: color 0.3s ease;
    }
    
    /* 余额信息 */
    .balance-info {
      padding: 25px 20px;
      text-align: center;
      background-color: var(--light);
      transition: background-color 0.3s ease;
    }
    
    .balance-title {
      font-size: 14px;
      color: var(--secondary);
      margin-bottom: 10px;
    }
    
    .balance-amount {
      font-size: 32px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 5px;
    }
    
    .balance-unit {
      font-size: 16px;
      color: var(--secondary);
    }
    
    /* 充值选项 */
    .recharge-options {
      padding: 20px;
      flex-grow: 1;
    }
    
    .options-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      color: var(--dark);
    }
    
    .amount-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin-bottom: 30px;
    }
    
    .amount-item {
      padding: 18px 10px;
      border-radius: 12px;
      border: 1px solid var(--border);
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      background-color: var(--white);
    }
    
    .amount-item:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }
    
    .amount-item.selected {
      border-color: var(--primary);
      background-color: rgba(59, 130, 246, 0.05);
    }
    
    .amount-item.selected::after {
      content: '\f00c';
      font-family: 'FontAwesome';
      position: absolute;
      top: 8px;
      right: 8px;
      color: var(--primary);
      font-size: 14px;
    }
    
    .amount-value {
      font-size: 18px;
      font-weight: 600;
      color: var(--dark);
      margin-bottom: 5px;
    }
    
    .amount-price {
      font-size: 12px;
      color: var(--secondary);
    }
    
    /* 自定义金额 */
    .custom-amount {
      margin-bottom: 30px;
    }
    
    .custom-input {
      width: 100%;
      padding: 15px;
      border-radius: 12px;
      border: 1px solid var(--border);
      font-size: 16px;
      text-align: center;
      background-color: var(--white);
      color: var(--dark);
      transition: border-color 0.2s ease;
    }
    
    .custom-input:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .custom-input::placeholder {
      color: var(--secondary);
    }
    
    /* 支付方式 */
    .payment-methods {
      margin-bottom: 30px;
    }
    
    .method-item {
      display: flex;
      align-items: center;
      padding: 15px;
      border-radius: 12px;
      border: 1px solid var(--border);
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      background-color: var(--white);
    }
    
    .method-item:hover {
      border-color: var(--primary);
    }
    
    .method-item.selected {
      border-color: var(--primary);
      background-color: rgba(59, 130, 246, 0.05);
    }
    
    .method-icon {
      width: 30px;
      height: 30px;
      margin-right: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .method-icon img {
      max-width: 100%;
      max-height: 100%;
    }
    
    .method-name {
      flex-grow: 1;
      font-size: 16px;
      color: var(--dark);
    }
    
    .method-check {
      color: var(--primary);
      font-size: 18px;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    
    .method-item.selected .method-check {
      opacity: 1;
    }
    
    /* 优惠信息 */
    .promotion {
      padding: 12px 15px;
      border-radius: 12px;
      background-color: rgba(59, 130, 246, 0.05);
      margin-bottom: 30px;
      display: flex;
      align-items: center;
    }
    
    .promotion-icon {
      color: var(--primary);
      font-size: 18px;
      margin-right: 10px;
    }
    
    .promotion-text {
      flex-grow: 1;
      font-size: 14px;
      color: var(--dark);
    }
    
    .promotion-link {
      color: var(--primary);
      font-size: 14px;
      text-decoration: none;
    }
    
    /* 充值按钮 */
    .recharge-btn {
      display: block;
      width: 100%;
      padding: 16px;
      border-radius: 12px;
      background-color: var(--primary);
      color: white;
      border: none;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-bottom: 15px;
    }
    
    .recharge-btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }
    
    .recharge-btn:active {
      transform: translateY(0);
    }
    
    /* 说明文字 */
    .recharge-note {
      font-size: 12px;
      color: var(--secondary);
      text-align: center;
      margin-bottom: 30px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
      transition: all 0.3s ease;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 风格1：现代蓝 */
    .style-1 {
      --primary: var(--style1);
    }
    
    .style-1 .balance-info {
      background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
    }
    
    .style-1 .amount-item.selected {
      background-color: rgba(59, 130, 246, 0.08);
    }
    
    /* 风格2：活力橙 */
    .style-2 {
      --primary: var(--style2);
    }
    
    .style-2 .balance-info {
      background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
    }
    
    .style-2 .amount-item {
      border-radius: 20px;
    }
    
    .style-2 .amount-item.selected {
      background-color: rgba(249, 115, 22, 0.08);
    }
    
    .style-2 .recharge-btn {
      border-radius: 25px;
      box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3);
    }
    
    .style-2 .promotion {
      background-color: rgba(249, 115, 22, 0.08);
    }
    
    /* 风格3：优雅紫 */
    .style-3 {
      --primary: var(--style3);
    }
    
    .style-3 .balance-info {
      background: linear-gradient(135deg, #FAF5FF, #EDE9FE);
    }
    
    .style-3 .amount-item {
      border-radius: 16px;
    }
    
    .style-3 .method-item {
      border-radius: 16px;
    }
    
    .style-3 .recharge-btn {
      background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    }
    
    .style-3 .promotion {
      background-color: rgba(139, 92, 246, 0.08);
    }
    
    /* 风格4：商务蓝 */
    .style-4 {
      --primary: var(--style4);
    }
    
    .style-4 .page-header {
      background-color: var(--primary);
      color: white;
      border-bottom: none;
    }
    
    .style-4 .header-back,
    .style-4 .header-btn {
      color: white;
    }
    
    .style-4 .amount-item {
      border-width: 2px;
    }
    
    .style-4 .amount-item.selected {
      background-color: rgba(30, 64, 175, 0.05);
      border-color: var(--primary);
    }
    
    .style-4 .recharge-btn {
      background-color: var(--primary);
      font-weight: 700;
    }
    
    /* 风格5：清新绿 */
    .style-5 {
      --primary: var(--style5);
    }
    
    .style-5 .balance-info {
      background-color: #F0FDF4;
    }
    
    .style-5 .amount-grid {
      gap: 12px;
    }
    
    .style-5 .amount-item {
      border-radius: 8px;
      background-color: #F9FAFB;
    }
    
    .style-5 .amount-item.selected {
      background-color: #ECFDF5;
      border-color: var(--primary);
    }
    
    .style-5 .recharge-btn {
      background-color: var(--primary);
    }
    
    .style-5 .promotion {
      background-color: #ECFDF5;
    }
    
    /* 风格6：暗黑模式 */
    .style-6 {
      --primary: #3B82F6;
      --secondary: #9CA3AF;
      --light: #1F2937;
      --dark: #F9FAFB;
      --white: #111827;
      --border: #374151;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }
    
    .style-6 body {
      background-color: #030712;
    }
    
    .style-6 .container {
      background-color: var(--white);
    }
    
    .style-6 .page-header {
      background-color: var(--light);
      border-bottom-color: var(--border);
    }
    
    .style-6 .header-back,
    .style-6 .header-btn,
    .style-6 .page-title {
      color: var(--dark);
    }
    
    .style-6 .balance-info {
      background-color: var(--light);
    }
    
    .style-6 .amount-item {
      background-color: var(--light);
      border-color: var(--border);
    }
    
    .style-6 .amount-item.selected {
      background-color: rgba(59, 130, 246, 0.1);
      border-color: var(--primary);
    }
    
    .style-6 .custom-input {
      background-color: var(--light);
      border-color: var(--border);
      color: var(--dark);
    }
    
    .style-6 .method-item {
      background-color: var(--light);
      border-color: var(--border);
    }
    
    .style-6 .method-item.selected {
      background-color: rgba(59, 130, 246, 0.1);
      border-color: var(--primary);
    }
    
    .style-6 .promotion {
      background-color: rgba(59, 130, 246, 0.1);
    }
    
    .style-6 .style-switcher {
      background-color: var(--light);
    }
    
    .style-6 .switcher-header {
      border-bottom-color: var(--border);
      color: var(--dark);
    }
    
    .style-6 .switcher-option {
      color: var(--dark);
    }
    
    .style-6 .switcher-option:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .amount-value {
        font-size: 16px;
      }
      
      .amount-item {
        padding: 15px 5px;
      }
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择充值页面样式</div>
    <div class="switcher-option active" data-style="1">现代蓝</div>
    <div class="switcher-option" data-style="2">活力橙</div>
    <div class="switcher-option" data-style="3">优雅紫</div>
    <div class="switcher-option" data-style="4">商务蓝</div>
    <div class="switcher-option" data-style="5">清新绿</div>
    <div class="switcher-option" data-style="6">暗黑模式</div>
  </div>
  
  <div class="container">
    <!-- 风格1：现代蓝 -->
    <div class="recharge-page active" id="page1">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">积分充值</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-history"></i></button>
        </div>
      </div>
      
      <div class="balance-info">
        <div class="balance-title">当前余额</div>
        <div class="balance-amount">2,580</div>
        <div class="balance-unit">积分</div>
      </div>
      
      <div class="recharge-options">
        <div class="options-title">选择充值金额</div>
        
        <div class="amount-grid">
          <div class="amount-item">
            <div class="amount-value">100</div>
            <div class="amount-price">¥10.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">500</div>
            <div class="amount-price">¥45.00</div>
          </div>
          <div class="amount-item selected">
            <div class="amount-value">1,000</div>
            <div class="amount-price">¥90.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">2,000</div>
            <div class="amount-price">¥170.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">5,000</div>
            <div class="amount-price">¥400.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">10,000</div>
            <div class="amount-price">¥750.00</div>
          </div>
        </div>
        
        <div class="custom-amount">
          <input type="text" class="custom-input" placeholder="其他金额">
        </div>
        
        <div class="promotion">
          <div class="promotion-icon"><i class="fa fa-tag"></i></div>
          <div class="promotion-text">充值满1000积分赠送100积分</div>
          <a href="#" class="promotion-link">查看全部</a>
        </div>
        
        <div class="options-title">选择支付方式</div>
        
        <div class="payment-methods">
          <div class="method-item selected">
            <div class="method-icon">
              <img src="https://picsum.photos/id/237/100/100" alt="微信支付">
            </div>
            <div class="method-name">微信支付</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
          <div class="method-item">
            <div class="method-icon">
              <img src="https://picsum.photos/id/238/100/100" alt="支付宝">
            </div>
            <div class="method-name">支付宝</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
          <div class="method-item">
            <div class="method-icon">
              <img src="https://picsum.photos/id/239/100/100" alt="银行卡">
            </div>
            <div class="method-name">银行卡支付</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
        </div>
        
        <button class="recharge-btn">确认充值 ¥90.00</button>
        
        <div class="recharge-note">
          充值成功后积分将自动添加到您的账户<br>
          如有疑问，请联系客服
        </div>
      </div>
    </div>
    
    <!-- 风格2：活力橙 -->
    <div class="recharge-page" id="page2">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">充值积分</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-question-circle"></i></button>
        </div>
      </div>
      
      <div class="balance-info">
        <div class="balance-title">我的积分</div>
        <div class="balance-amount">1,250</div>
        <div class="balance-unit">积分</div>
      </div>
      
      <div class="recharge-options">
        <div class="options-title">热门充值</div>
        
        <div class="amount-grid">
          <div class="amount-item">
            <div class="amount-value">100</div>
            <div class="amount-price">¥10</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">500</div>
            <div class="amount-price">¥45</div>
          </div>
          <div class="amount-item selected">
            <div class="amount-value">1,000</div>
            <div class="amount-price">¥90</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">2,000</div>
            <div class="amount-price">¥170</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">5,000</div>
            <div class="amount-price">¥400</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">10,000</div>
            <div class="amount-price">¥750</div>
          </div>
        </div>
        
        <div class="custom-amount">
          <input type="text" class="custom-input" placeholder="输入其他金额">
        </div>
        
        <div class="promotion">
          <div class="promotion-icon"><i class="fa fa-fire"></i></div>
          <div class="promotion-text">新用户首次充值享8折优惠</div>
          <a href="#" class="promotion-link">立即领取</a>
        </div>
        
        <div class="options-title">支付方式</div>
        
        <div class="payment-methods">
          <div class="method-item selected">
            <div class="method-icon">
              <img src="https://picsum.photos/id/237/100/100" alt="微信支付">
            </div>
            <div class="method-name">微信支付</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
          <div class="method-item">
            <div class="method-icon">
              <img src="https://picsum.photos/id/238/100/100" alt="支付宝">
            </div>
            <div class="method-name">支付宝</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
        </div>
        
        <button class="recharge-btn">确认支付 ¥90.00</button>
        
        <div class="recharge-note">
          积分充值后将实时到账<br>
          充值记录可在"我的"页面查询
        </div>
      </div>
    </div>
    
    <!-- 风格3：优雅紫 -->
    <div class="recharge-page" id="page3">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">积分充值中心</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-gift"></i></button>
        </div>
      </div>
      
      <div class="balance-info">
        <div class="balance-title">当前可用积分</div>
        <div class="balance-amount">3,750</div>
        <div class="balance-unit">积分</div>
      </div>
      
      <div class="recharge-options">
        <div class="options-title">选择充值套餐</div>
        
        <div class="amount-grid">
          <div class="amount-item">
            <div class="amount-value">100</div>
            <div class="amount-price">¥10.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">500</div>
            <div class="amount-price">¥45.00</div>
          </div>
          <div class="amount-item selected">
            <div class="amount-value">1,000</div>
            <div class="amount-price">¥90.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">2,000</div>
            <div class="amount-price">¥170.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">5,000</div>
            <div class="amount-price">¥400.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">10,000</div>
            <div class="amount-price">¥750.00</div>
          </div>
        </div>
        
        <div class="custom-amount">
          <input type="text" class="custom-input" placeholder="自定义金额">
        </div>
        
        <div class="promotion">
          <div class="promotion-icon"><i class="fa fa-diamond"></i></div>
          <div class="promotion-text">充值5000积分以上赠送VIP会员月卡</div>
          <a href="#" class="promotion-link">详情</a>
        </div>
        
        <div class="options-title">支付方式</div>
        
        <div class="payment-methods">
          <div class="method-item selected">
            <div class="method-icon">
              <img src="https://picsum.photos/id/237/100/100" alt="微信支付">
            </div>
            <div class="method-name">微信支付</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
          <div class="method-item">
            <div class="method-icon">
              <img src="https://picsum.photos/id/238/100/100" alt="支付宝">
            </div>
            <div class="method-name">支付宝</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
          <div class="method-item">
            <div class="method-icon">
              <img src="https://picsum.photos/id/239/100/100" alt="银行卡">
            </div>
            <div class="method-name">银行卡</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
        </div>
        
        <button class="recharge-btn">确认充值 1000积分</button>
        
        <div class="recharge-note">
          积分可用于平台内所有付费服务<br>
          客服热线：400-123-4567
        </div>
      </div>
    </div>
    
    <!-- 风格4：商务蓝 -->
    <div class="recharge-page" id="page4">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">账户充值</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-cog"></i></button>
        </div>
      </div>
      
      <div class="balance-info">
        <div class="balance-title">账户余额</div>
        <div class="balance-amount">8,540</div>
        <div class="balance-unit">积分</div>
      </div>
      
      <div class="recharge-options">
        <div class="options-title">充值金额</div>
        
        <div class="amount-grid">
          <div class="amount-item">
            <div class="amount-value">100</div>
            <div class="amount-price">¥10.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">500</div>
            <div class="amount-price">¥45.00</div>
          </div>
          <div class="amount-item selected">
            <div class="amount-value">1,000</div>
            <div class="amount-price">¥90.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">2,000</div>
            <div class="amount-price">¥170.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">5,000</div>
            <div class="amount-price">¥400.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">10,000</div>
            <div class="amount-price">¥750.00</div>
          </div>
        </div>
        
        <div class="custom-amount">
          <input type="text" class="custom-input" placeholder="输入其他金额">
        </div>
        
        <div class="promotion">
          <div class="promotion-icon"><i class="fa fa-percent"></i></div>
          <div class="promotion-text">企业用户充值享9折优惠</div>
          <a href="#" class="promotion-link">了解更多</a>
        </div>
        
        <div class="options-title">支付方式</div>
        
        <div class="payment-methods">
          <div class="method-item selected">
            <div class="method-icon">
              <img src="https://picsum.photos/id/239/100/100" alt="银行卡">
            </div>
            <div class="method-name">企业银行卡</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
          <div class="method-item">
            <div class="method-icon">
              <img src="https://picsum.photos/id/237/100/100" alt="微信支付">
            </div>
            <div class="method-name">微信支付</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
          <div class="method-item">
            <div class="method-icon">
              <img src="https://picsum.photos/id/238/100/100" alt="支付宝">
            </div>
            <div class="method-name">支付宝</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
        </div>
        
        <button class="recharge-btn">确认支付 ¥90.00</button>
        
        <div class="recharge-note">
          支持开具增值税普通发票<br>
          到账时间：即时到账
        </div>
      </div>
    </div>
    
    <!-- 风格5：清新绿 -->
    <div class="recharge-page" id="page5">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">积分充值</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-leaf"></i></button>
        </div>
      </div>
      
      <div class="balance-info">
        <div class="balance-title">当前积分</div>
        <div class="balance-amount">560</div>
        <div class="balance-unit">积分</div>
      </div>
      
      <div class="recharge-options">
        <div class="options-title">选择充值金额</div>
        
        <div class="amount-grid">
          <div class="amount-item">
            <div class="amount-value">100</div>
            <div class="amount-price">¥10</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">500</div>
            <div class="amount-price">¥45</div>
          </div>
          <div class="amount-item selected">
            <div class="amount-value">1,000</div>
            <div class="amount-price">¥90</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">2,000</div>
            <div class="amount-price">¥170</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">5,000</div>
            <div class="amount-price">¥400</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">10,000</div>
            <div class="amount-price">¥750</div>
          </div>
        </div>
        
        <div class="custom-amount">
          <input type="text" class="custom-input" placeholder="其他金额">
        </div>
        
        <div class="promotion">
          <div class="promotion-icon"><i class="fa fa-heart"></i></div>
          <div class="promotion-text">每充值100积分可捐赠1积分给环保组织</div>
          <a href="#" class="promotion-link">详情</a>
        </div>
        
        <div class="options-title">支付方式</div>
        
        <div class="payment-methods">
          <div class="method-item selected">
            <div class="method-icon">
              <img src="https://picsum.photos/id/237/100/100" alt="微信支付">
            </div>
            <div class="method-name">微信支付</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
          <div class="method-item">
            <div class="method-icon">
              <img src="https://picsum.photos/id/238/100/100" alt="支付宝">
            </div>
            <div class="method-name">支付宝</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
        </div>
        
        <button class="recharge-btn">充值 1000 积分</button>
        
        <div class="recharge-note">
          积分可兑换平台内虚拟物品<br>
          客服工作时间：9:00-18:00
        </div>
      </div>
    </div>
    
    <!-- 风格6：暗黑模式 -->
    <div class="recharge-page" id="page6">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">积分充值</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-history"></i></button>
        </div>
      </div>
      
      <div class="balance-info">
        <div class="balance-title">当前余额</div>
        <div class="balance-amount">4,890</div>
        <div class="balance-unit">积分</div>
      </div>
      
      <div class="recharge-options">
        <div class="options-title">选择充值金额</div>
        
        <div class="amount-grid">
          <div class="amount-item">
            <div class="amount-value">100</div>
            <div class="amount-price">¥10.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">500</div>
            <div class="amount-price">¥45.00</div>
          </div>
          <div class="amount-item selected">
            <div class="amount-value">1,000</div>
            <div class="amount-price">¥90.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">2,000</div>
            <div class="amount-price">¥170.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">5,000</div>
            <div class="amount-price">¥400.00</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">10,000</div>
            <div class="amount-price">¥750.00</div>
          </div>
        </div>
        
        <div class="custom-amount">
          <input type="text" class="custom-input" placeholder="其他金额">
        </div>
        
        <div class="promotion">
          <div class="promotion-icon"><i class="fa fa-star"></i></div>
          <div class="promotion-text">充值满2000积分解锁专属暗黑主题</div>
          <a href="#" class="promotion-link">查看</a>
        </div>
        
        <div class="options-title">选择支付方式</div>
        
        <div class="payment-methods">
          <div class="method-item selected">
            <div class="method-icon">
              <img src="https://picsum.photos/id/237/100/100" alt="微信支付">
            </div>
            <div class="method-name">微信支付</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
          <div class="method-item">
            <div class="method-icon">
              <img src="https://picsum.photos/id/238/100/100" alt="支付宝">
            </div>
            <div class="method-name">支付宝</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
          <div class="method-item">
            <div class="method-icon">
              <img src="https://picsum.photos/id/239/100/100" alt="银行卡">
            </div>
            <div class="method-name">银行卡支付</div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </div>
        </div>
        
        <button class="recharge-btn">确认充值 ¥90.00</button>
        
        <div class="recharge-note">
          积分充值后将自动到账<br>
          支持24小时在线客服
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const rechargePages = {
      1: document.getElementById('page1'),
      2: document.getElementById('page2'),
      3: document.getElementById('page3'),
      4: document.getElementById('page4'),
      5: document.getElementById('page5'),
      6: document.getElementById('page6')
    };
    const bodyElement = document.body;
    
    // 初始化
    function init() {
      // 切换样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
        });
      });
      
      // 初始化金额选择
      initAmountSelection();
      
      // 初始化支付方式选择
      initPaymentSelection();
    }
    
    // 初始化金额选择
    function initAmountSelection() {
      document.querySelectorAll('.amount-item').forEach(item => {
        item.addEventListener('click', function() {
          // 找到同一页面中的所有金额项
          const page = this.closest('.recharge-page');
          page.querySelectorAll('.amount-item').forEach(amountItem => {
            amountItem.classList.remove('selected');
          });
          
          // 选中当前项
          this.classList.add('selected');
          
          // 更新按钮金额
          const amountValue = this.querySelector('.amount-value').textContent;
          const amountPrice = this.querySelector('.amount-price').textContent;
          const rechargeBtn = page.querySelector('.recharge-btn');
          
          // 根据不同页面的按钮文本格式更新
          if (page.id === 'page3') {
            rechargeBtn.textContent = `确认充值 ${amountValue}积分`;
          } else if (page.id === 'page5') {
            rechargeBtn.textContent = `充值 ${amountValue} 积分`;
          } else {
            rechargeBtn.textContent = `确认支付 ${amountPrice}`;
          }
        });
      });
    }
    
    // 初始化支付方式选择
    function initPaymentSelection() {
      document.querySelectorAll('.method-item').forEach(item => {
        item.addEventListener('click', function() {
          // 找到同一页面中的所有支付方式
          const page = this.closest('.recharge-page');
          page.querySelectorAll('.method-item').forEach(methodItem => {
            methodItem.classList.remove('selected');
          });
          
          // 选中当前项
          this.classList.add('selected');
        });
      });
    }
    
    // 关闭所有页面
    function closeAllPages() {
      Object.values(rechargePages).forEach(page => {
        page.classList.remove('active');
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 移除所有样式类
      bodyElement.classList.remove('style-1', 'style-2', 'style-3', 'style-4', 'style-5', 'style-6');
      
      // 添加当前样式类
      bodyElement.classList.add(`style-${style}`);
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
      
      // 显示对应页面
      closeAllPages();
      rechargePages[style].classList.add('active');
    }
    
    // 键盘导航
    document.addEventListener('keydown', function(e) {
      if (e.key === 'ArrowLeft') {
        let prev = currentStyle - 1;
        if (prev < 1) prev = 6;
        switchStyle(prev);
      } else if (e.key === 'ArrowRight') {
        let next = currentStyle + 1;
        if (next > 6) next = 1;
        switchStyle(next);
      }
    });
    
    // 启动
    init();
  </script>
</body>
</html>
